//使用reslove，获取项目的绝对路径；
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 配置入口
    entry: ['./src/js/index.js','./src/index.html'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    module: {
        //loader配置，用于打包转换css等资源
        rules: [
            {
                test: /\.css$/,
                use: [
                    // 创建style标签，将js中的style，插入到html head中
                    'style-loader',
                    // 将css样式文件打包到js文件中
                    'css-loader']
            },
            {
                test: /\.less$/,
                use: [
                    // 创建style标签，将js中的style，插入到html head中
                    'style-loader',
                    // 将css样式文件打包到js文件中
                    'css-loader',
                    // 将less编译成css样式
                    'less-loader']
            },
            {
                //打包图片资源
                test: /\.(jpg|jpge|png|bmp|gif)$/,
                loader: 'url-loader',
                options: {
                    //对于图片大小，小于8K的进行转成base64字符串，其他不转换；
                    limit: 8 * 1024,
                    //关闭 es转换，避免html，src引入的字符串，变成object
                    esModule:false,
                    //给图片重命名；
                    //[hash:10] ,获取重命名hash的前10位，为文件名；
                    //.[ext],使用源文件的后缀名；
                    name:'[hash:10].[ext]',
                    outputPath:'imgs'
                }
            },
            {
                //打包图片资源，用于打包html中src引用的图片
                test: /\.html$/,
                loader: 'html-loader',
            },
            
            {
                //exclude 排除文件类型，将其他资源统一打包
                exclude: /\.(css|js|jpg|jpge|png|bmp|gif|html|less|scss|sass|json)$/,
                loader: 'file-loader',
                options: {
                    //给文件重命名；
                    //[hash:10] ,获取重命名hash的前10位，为文件名；
                    //.[ext],使用源文件的后缀名；
                    name:'[hash:10].[ext]',
                    outputPath:'media'
                }
            },
        ]
       

    },
    plugins: [
        //打包html文件的插件，自动引入js文件,
        //template : 使用入口html文件为模板，否则会创建一个空的html；
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],

    mode: 'development',
    devServer:{
        contentBase:path.resolve(__dirname,'dist'),
        //启动压缩；
        compress : true,
        //自动服务器的端口；
        port : 3000,
        //自动打开浏览器
        open :true,
        //开启hnr,热更新
        hot:true
    }
}